<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>FileInputSystem</title>
    <style>
        body{
            width: 1920px;
            height: 720px;
            background-image: url(../static/img/login-bg.jpg);
            background-repeat: no-repeat;
        }
        .text {
            font-size: 14px;
        }

        .item {
            padding: 18px 0;
        }
        .box-card {
            width: 480px;
            margin-left: 100px;
        }
        #login-card{
            margin: 350px auto;
        }
    </style>

</head>
<body>
<div id="app">
    <el-card id = "login-card" class="box-card">
        <h2 style="border-bottom: 1px solid black; text-align: center">  网盘管理系统  </h2>
        <el-form :model="account" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width: 400px;margin: 0 auto">
            <el-form-item label="用户名" prop="username">
                <el-input type="text" v-model="account.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="account.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-checkbox v-model="autoLogin">自动登录</el-checkbox>
            <el-form-item>
                <el-button style="width: 40%;margin-left: 10px" type="primary" @click="register()">注册</el-button>
                <el-button style="width: 40%;margin-left: 10px" type="primary" @click="login()">登录</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <!-- 注册对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" placeholder="请输入密码" />
            </el-form-item>
            <el-form-item label="确定密码" prop="confirmPassword">
                <el-input v-model="form.confirmPassword" placeholder="请再次输入密码" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submit()">确 定</el-button>
            <el-button @click="cancel()">取 消</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        created(){

        },
        data() {
            var usernameCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入用户名'));
                } else {
                    callback();
                }
            };
            var passwordCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    callback();
                }
            };
            return {
                account: {
                    username: '',
                    password: '',
                },
                autoLogin: false,
                rules:{
                    username: [
                        { validator: usernameCheck, trigger: 'blur' }
                    ],
                    password: [
                        { validator: passwordCheck, trigger: 'blur' }
                    ],
                },
                /*表单参数*/
                form:{
                    username: '',
                    password: '',
                    confirmPassword: ''
                },
                /*dialog 隐形参数*/
                open: false,
                /*dialog title*/
                title: '注册账户'
            }
        },
        methods:{
            login : function(){
                axios.post("/api/admin/login",this.account).then((res)=>{
                    if(res!=null){
                        if(res.data.flag){
                            this.$notify({
                                title: '登录成功',
                                message: '已登陆到服务器',
                                duration: 3000,
                                type: 'success'
                            });
                        }else {
                            this.$notify({
                                title: '登录失败',
                                message: res.data.data,
                                duration: 3000,
                                type: 'error'
                            });
                        }
                    }
                }).catch(()=>{
                    this.$notify({
                        title: '登录失败',
                        message: '账户或服务器密码错误',
                        duration: 3000,
                        type: 'error'
                    });
                });
            },
            register: function (){
                this.open = true;
            },
            submit: function (){

            },
            cancel: function (){
                this.open = false;
            }
        },
    })
</script>
</html>